// out: ../css/dating.css
@import 'common';

#app {
	background-color: #f7f9fd;
}

.wrap {
	background-color: #f7f9fd;
}

.flex-con {
	overflow-y: auto;
}

.dating-title {
	display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  
  .tabMenu-list {
    display: flex;
    width: 70%;
    height: 40px;
    padding: 2px;
    box-sizing: border-box;
    background: #ddd;
    border-radius: 40px;
    .tabMenu {
      flex: 1;
      text-align: center;
      line-height: 36px;
      font-size: 14px;
      border-radius: 36px;
      color: #333;
      &.active {
        background: @main-color;
        color: #fff;
      }
    }
  }
}

.dating-list {
	.dating-item {
		padding: 10px 15px;
		background-color: #fff;
		box-shadow: #efefef 0px 5px 10px;
		border-top: 1px solid #efefef;
		margin-bottom: 2px;
		position: relative;
		.icon-yijieshu {
			position: absolute;
			right: 10px;
			bottom: 10px;
			font-size: 50px;
			color: @main-color;
		}
	}
}
.member-wrap {
	display: flex;
	align-items: center;
	height: 70px;
	position: relative;
	.member-avatar {
		width: 60px;
		height: 60px;
		margin-right: 10px;
		img {
			display: block;
			width: 100%;
			border-radius: 60px;
		}
	}
	.member-info {
		flex: 1;
		.name-wrap {
			display: flex;
			align-items: center;
			margin-bottom: 5px;
			.name {
				font-size: 14px;
				color: #333;
				margin-right: 5px;
			}
			.sex {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10px;
				color: #fff;
				font-size: 12px;
				padding: 0 6px;
				line-height: 16px;
				&.sex1 {
					background-color: #0273f3;
				}
				&.sex2 {
					background-color: #fd85cc;
				}
				i {
					font-size: 12px;
				}
			}
			.time {
				flex: 1;
				text-align: right;
				font-size: 12px;
				color: #999;
			}
		}
		.city {
			font-size: 12px;
			color: #666
		}
	}
}
.dating-content {
	.content-item {
		display: flex;
		align-items: center;
		&.content-item {
			margin-top: 10px;
		}
		.item-title {
			margin-right: 5px;
			line-height: 22px;
		}
		.item-con {
			line-height: 22px;
		}
	}
}
.dating-details {
	padding: 10px 15px;
	background-color: #fff;
	.btn-wrap {
		padding: 20px;
		.date-btn {
			display: block;
			width: 100%;
			height: 40px;
			background: @main-color;
			color: #fff;
			border-radius: 40px;
		}
	}
}
.rule-wrap {
	padding: 20px;
	.rule-title {
		color: #333;
		margin-bottom: 10px;
	}
	.rule-content {
		line-height: 22px;
		color: #555;
		p {
			margin: 0 0 5px;
		}
	}
}

.redPackage {
	.redPackage-content {
		display: flex;
		align-items: center;
		padding-top: 10px;

		.redPackage-img {
			margin-right: 10px;
			img {
				width: 60px;
				height: 60px;
			}
		}

		.redPackage-info {
			flex: 1;
			.redPackage-info-item {
				display: flex;
				align-items: center;
				font-size: 14px;
				line-height: 20px;
				& + .redPackage-info-item {
					margin-top: 2px;
				}
				.th {
					color: #333;
				}
				.td {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #666;
					img {
						display: block;
						width: 20px;
						height: 20px;
						margin-right: 5px;
					}
					.reply-count {
						color: @main-color;
					}
				}
				&.time {
					font-size: 14px;
					color: #999;
				}
				&.detail {
					font-size: 12px;
					color: #999;
				}
			}
		}

		.redPackage-button {
			button {
				height: 30px;
				width: 60px;
				border-radius: 30px;
				color: #fff;
				background-color: #d52acf;
				font-size: 12px;
			}
		}
	}
}
.form-wrap {
	padding: 10px 15px;
	background-color: #fff;
	.form-item {
		display: flex;
		& + .form-item {
			margin-top: 10px;
		}
		.item-th {
			line-height: 40px;
		}
		.item-td {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			padding-left: 10px;
			span {
				line-height: 40px;
			}
			.date-audio {
				display: flex;
				align-items: center;
				i {
					font-size: 12px;
					margin-left: 5px;
				}
			}
			i.icon-next {
				font-size: 10px;
				color: #666;
			}
			.date-input {
				flex: 1;
				border: 1px solid #ddd;
				border-radius: 5px;
				line-height: 38px;
				padding: 0 5px;
			}
			.date-description {
				flex: 1;
				border: 1px solid #ddd;
				border-radius: 5px;
				padding: 5px;
				line-height: 22px;
				resize: none;
				height: 60px;
			}
			label.placeholder {
				flex: 1;
				line-height: 40px;
			}
			#time {
				position: absolute;
				visibility: hidden;
			}
			.voice-wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 120px;
				height: 30px;
				box-sizing: border-box;
				padding: 5px 10px;
				border: 1px solid #666;
				border-radius: 5px;
				position: relative;
				img {
					height: 100%;
				}
				i {
					display: block;
					width: 16px;
					height: 16px;
					line-height: 18px;
					text-align: center;
					border: 1px solid #888;
					border-radius: 16px;
					font-size: 9px;
					position: absolute;
					right: -8px;
					top: -8px;
					color: #555;
					font-weight: bold;
					background: #fff;
				}
			}
		}
	}
	.btn-wrap {
		padding: 20px;
		.date-btn {
			display: block;
			width: 100%;
			height: 40px;
			background: @main-color;
			border-radius: 40px;
			color: #fff;
		}
	}
}
.voice-gif {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  img {
    width: 100px;
    height: 100px;
  }
}
.reply-list {
	h2 {
		padding: 10px 20px;
		color: #333;
		font-size: 14px;
		font-weight: normal;
	}
}
.reply-item {
	display: flex;
	padding: 10px;
	align-items: center;
	background: #fff;
	.eq {
		.icon {
			width: 20px;
			height: 20px;
			&.icon-ranking0 {
				background-position: -320px -40px;
			}
			&.icon-ranking1 {
				background-position: -340px -40px;
			}
			&.icon-ranking2 {
				background-position: -360px -40px;
			}
		}
		.eq-text {
			width: 20px;
			text-align: center;
			font-size: 14px;
		}
	}
	.avatar {
		line-height: 0;
		margin: 0 10px;
		img {
			width: 40px;
			height: 40px;
			border-radius: 40px;
		}
	}
	.info-wrap {
		flex: 1;
		.name {
			font-size: 14px;
			margin-bottom: 2px;
			.age1 {
				height: 14px;
				line-height: 14px;
				margin-left: 10px;
				padding: 0 6px;
				background: #0096dc;
				color: #fff;
				border-radius: 20px;
				font-size: 12px;
				text-align: center;
				.iconfont {
					font-size: 12px;
				}
			}
			.age2 {
				height: 14px;
				line-height: 14px;
				margin-left: 10px;
				padding: 0 6px;
				background: #f25c76;
				color: #fff;
				border-radius: 20px;
				font-size: 12px;
				text-align: center;
				.iconfont {
					font-size: 12px;
				}
			}
		}
		.info {
			font-size: 12px;
			color: #999;
		}
	}
	.value {
		display: flex;
		align-items: center;
		img {
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
		button {
			padding: 0 15px;
			background: @main-color;
			color: #fff;
			border-radius: 30px;
			line-height: 30px;
			font-size: 12px;
		}
		.iconfont {
			color: @main-color;
		}
	}
	.icon-next {
		font-size: 12px;
		color: #999;
	}
}